<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>事件对象</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        #div1{
            margin: 20px auto;
            width: 100px;
            height: 100px;
            background-color: red;
            cursor: pointer;
        }
    </style>
</head>
<body>
<div id="div1"></div>
<input id="input1">
<script>
    let oDiv = document.getElementById("div1");
    let input1 = document.getElementById("input1");
    //事件对象
    //  ->给元素的某一个行为绑定方法(不管是DOM0还是DOM2),当事件触发的时候,都会把对应的绑定方法执行;
    //  ->不仅仅执行了.而且还给对应的方法传递了一个参数值:
    //      "事件对象" ->//PointerEvent(点击事件对象)/MouseEvent(鼠标事件对象)/KeyboardEvent(键盘事件对象)

    function fn(event) {
        //PointerEvent
        //MouseEvent
        //KeyboardEvent
        console.log("fn--->",event)

        //event.type: "click" 当前事件的类型
        //event.clientX/clientY:  鼠标触发点距离"当前窗口"(不管处于那一层,都是获取的距离当前屏幕左上角)左上角的X/Y轴的坐标
        //event.pageX/pageY: 鼠标触发点距离"BODY"左上角的X/Y轴的坐标(IE678不兼容);
        //event.screenX/screenY: 鼠标触发点距离整个屏幕左上角的X/Y轴坐标
        //event.offsetX/offsetY: 鼠标触发点距离当前触发元素左上角的X/Y轴坐标

        //event.target 获取当前操作的事件源(鼠标是在哪个元素上操作的,那么事件源就是谁);

        //cancelBubble = false //取消冒泡  阻止冒泡 = true
        //defaultPrevented = false //默认行为  阻止默认行为=true

    }
//    fn()
    oDiv.onclick = fn;

    oDiv.addEventListener("click", fn, false)
    //DOM0和DOM2是可以共存的,而且之间没有任何影响(因为他们底层处理机制不同)

//    oDiv.onmouseenter = fn;
//    input1.onkeydown = fn;
</script>
</body>
</html>